<template>
  <div class="comments_panel">
    <!-- 用户头像 -->
    <div class="user_av">
      <img :src="userHeaderImg" alt="" />
    </div>
    <!-- 评论内容区域 -->
    <div class="comments_area">
      <!-- 评论用户昵称账户 -->
      <div class="user_panel">
        <div class="name">
          <!-- 用户名 -->
          <div class="nick">
            E4glet
          </div>
          <!-- 认证标识 -->
          <div class="auth">
            <svg
              viewBox="0 0 22 22"
              aria-label="认证账号"
              role="img"
              data-testid="icon-verified"
            >
              <g>
                <path
                  d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"
                ></path>
              </g>
            </svg>
          </div>
          <!-- 账户 -->
          <div class="acc">@E4gletE4gletE4gletE4glet</div>
        </div>
        <!-- 更多 -->
        <div class="more">
          <div class="icon">
            <div class="item">
              <svg viewBox="0 0 24 24" aria-hidden="true">
                <g>
                  <path
                    d="M3 12c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm9 2c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm7 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"
                  ></path>
                </g>
              </svg>
            </div>
          </div>
        </div>
      </div>
      <!-- 评论内容 -->
      <div class="comments_content">
        <div>{{ postContent }}</div>
      </div>
      <!-- 评论图片 -->
      <div>
        <div class="post_pic">
          <img :src="picImg" alt="" />
        </div>
      </div>
      <!-- 评论/转发/点赞喜欢/分享 -->
      <div>
        <div class="post_opr">
          <!-- 评论 -->
          <div class="ltr">
            <div class="icon">
              <div class="item">
                <svg
                  viewBox="0 0 24 24"
                  aria-hidden="true"
                  class="r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1hdv0qi"
                >
                  <g>
                    <path
                      d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z"
                    ></path>
                  </g>
                </svg>
              </div>
            </div>
            <span class="num">11</span>
          </div>
          <!-- 转发 -->
          <div class="ltr">
            <div class="icon zhuanfa">
              <div class="item">
                <svg
                  viewBox="0 0 24 24"
                  aria-hidden="true"
                  class="r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1hdv0qi"
                >
                  <g>
                    <path
                      d="M4.5 3.88l4.432 4.14-1.364 1.46L5.5 7.55V16c0 1.1.896 2 2 2H13v2H7.5c-2.209 0-4-1.79-4-4V7.55L1.432 9.48.068 8.02 4.5 3.88zM16.5 6H11V4h5.5c2.209 0 4 1.79 4 4v8.45l2.068-1.93 1.364 1.46-4.432 4.14-4.432-4.14 1.364-1.46 2.068 1.93V8c0-1.1-.896-2-2-2z"
                    ></path>
                  </g>
                </svg>
              </div>
            </div>
            <span class="num">33</span>
          </div>
          <!-- 点赞/喜欢 -->
          <div class="ltr">
            <div class="icon xihuan">
              <div class="item">
                <div v-if="false">
                  <svg
                    viewBox="0 0 24 24"
                    aria-hidden="true"
                    class="r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1hdv0qi"
                  >
                    <g>
                      <path
                        d="M16.697 5.5c-1.222-.06-2.679.51-3.89 2.16l-.805 1.09-.806-1.09C9.984 6.01 8.526 5.44 7.304 5.5c-1.243.07-2.349.78-2.91 1.91-.552 1.12-.633 2.78.479 4.82 1.074 1.97 3.257 4.27 7.129 6.61 3.87-2.34 6.052-4.64 7.126-6.61 1.111-2.04 1.03-3.7.477-4.82-.561-1.13-1.666-1.84-2.908-1.91zm4.187 7.69c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z"
                      ></path>
                    </g>
                  </svg>
                  <span>33</span>
                </div>
                <div v-else class="poped">
                  <svg
                    viewBox="0 0 24 24"
                    aria-hidden="true"
                    class="r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1hdv0qi"
                  >
                    <g>
                      <path
                        d="M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z"
                      ></path>
                    </g>
                  </svg>
                </div>
              </div>
            </div>
            <span class="num">16</span>
          </div>
          <!-- 访问量 -->
          <div class="ltr">
            <div class="icon">
              <div class="item">
                <svg viewBox="0 0 24 24" aria-hidden="true">
                  <g>
                    <path
                      d="M8.75 21V3h2v18h-2zM18 21V8.5h2V21h-2zM4 21l.004-10h2L6 21H4zm9.248 0v-7h2v7h-2z"
                    ></path>
                  </g>
                </svg>
              </div>
            </div>
            <span class="num">33</span>
          </div>
          <!-- 分享 -->
          <div class="ltr">
            <div class="icon">
              <div class="item">
                <svg
                  viewBox="0 0 24 24"
                  aria-hidden="true"
                  class="r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1hdv0qi"
                >
                  <g>
                    <path
                      d="M12 2.59l5.7 5.7-1.41 1.42L13 6.41V16h-2V6.41l-3.3 3.3-1.41-1.42L12 2.59zM21 15l-.02 3.51c0 1.38-1.12 2.49-2.5 2.49H5.5C4.11 21 3 19.88 3 18.5V15h2v3.5c0 .28.22.5.5.5h12.98c.28 0 .5-.22.5-.5L19 15h2z"
                    ></path>
                  </g>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  <script>
export default {
  name: "CommentsListComponents",
  props: {
    msg: String,
  },
  data() {
    return {
      userHeaderImg: require("@/assets/img/user.png"),
      postContent:
        "【持续深化高等教育改革创新】改革创新是推进教育现代化的基本原则，是教育事业发展的根本动力。习近平总书记指出，从教育大国到教育强国是一个系统性跃升和质变，必须以改革创新为动力。",
      picImg: require("@/assets/img/pic01.jpg"),
    };
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 评论列表 */
.comments_panel {
  display: flex;
  border-top: 1px solid #ebebeb;
}

.user_av img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 10px 18px;
}

.comments_area {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.user_panel {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

/* 用户标题 1.昵称  */

.user_panel .name {
  display: flex;
  margin-top: 10px;
}
.user_panel .nick {
  font-weight: bold;
  max-width: 290px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user_panel .name .auth svg {
  width: 20px;
  height: 20px;
  fill: rgb(29, 155, 240);
}

/* 用户标题 2.账户  */
.user_panel .name .acc {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgb(83, 100, 113);
}
/* 用户标题 3.更多  */
.user_panel .more {
  margin-right: 10px;
}

.user_panel .more .icon {
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  /* 解释svg上下居中使用line-height,高度值为svg高度的一半+所在div高度=20/2 + 36 =46 */
  line-height: 46px;
}

.user_panel .more .icon:hover {
  background-color: rgba(110, 188, 240, 0.3);
  border-radius: 50%;
  cursor: pointer;
}

.user_panel .more .icon svg {
  width: 20px;
  height: 20px;
  fill: rgb(199, 197, 197);
}

/* 评论内容 */
.comments_content {
  margin: 10px 0;
}
.post_pic img {
  max-width: 480px;
  border-radius: 15px;
  margin-bottom: 10px;
}

/* 评论/转发/点赞/访问等 */
.post_opr {
  color: rgb(83, 100, 113);
  display: flex;
  fill: rgb(83, 100, 113);
  justify-content: space-between;
  margin-bottom: 18px;
  /* padding: 0 18px; */
  padding-right: 18px;
}

.post_opr .ltr {
  display: flex;
  cursor: pointer;
}

.post_opr .ltr .icon {
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  line-height: 46px;
}

.post_opr .ltr .icon:hover {
  background-color: rgba(29, 155, 240, 0.1);
  border-radius: 50%;
  color: rgb(29, 155, 240);
}

.post_opr .ltr .icon:hover svg {
  fill: rgb(29, 155, 240);
}

.post_opr .ltr .zhuanfa:hover {
  background-color: rgba(0, 186, 124, 0.1);
  border-radius: 50%;
}

.post_opr .ltr .zhuanfa:hover svg {
  fill: rgb(0, 186, 124);
}

.post_opr .ltr .xihuan:hover {
  background-color: rgba(249, 24, 128, 0.1);
  border-radius: 50%;
}

.post_opr .ltr .xihuan:hover svg {
  fill: rgb(249, 24, 128);
}

.post_opr .ltr .num {
  line-height: 36px;
}

.post_opr svg {
  width: 20px;
  height: 20px;
}

.poped svg {
  color: rgb(249, 24, 128);
  fill: rgb(249, 24, 128);
}

.post_opr span {
  display: inline-block;
  vertical-align: middle;
  font-size: 13px;
  line-height: 19px;
  padding: 0 10px;
}

@media screen and (max-width: 720px) {

    .user_panel .name{
        width:100%;
    }
  .user_panel .nick {
    max-width: 150px;
    width:100%;
  }

  .user_panel .name .acc {
    max-width: 120px;
    width:100%;
  }

  .comments_area {
    width: 100%;
  }

  .post_pic img {
    width: 100%;
  }
}
</style>